import Vue from 'vue'
import AntEmpty from './ant_empty.vue'

// 默认的配置
const initOpt = { description: '无相关信息匹配' }
const Mask = Vue.extend(AntEmpty)

const settingStyle = (el) => {
  el.style.display = 'flex'
  el.style.flexDirection = 'column'
  el.style.alignItems = 'center'
  el.style.justifyContent = 'center'
  el.style.minHeight = '200px'
  el.style.height = '100%'
}

const updateInstanceOpt = (instance, binding) => {
  instance.opt = {
    ...initOpt,
    ...binding.value
   }
}

export default {
  bind: function(el, binding) {
    const instance = new Mask().$mount(document.createElement('div'))
    el.appendChild(instance.$el)
    el.instance = instance
    settingStyle(el)  // 设置样式
    updateInstanceOpt(instance, binding)
  },
  update: function (el, binding) {
    updateInstanceOpt(el.instance, binding)
  },
  unbind: function (el) {
    el.instance && el.instance.$destroy()
  }
}